<template>
   <div class="mywallet">
        <wxc-minibar title="我的银行卡">
            <!-- <image slot="left" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/back_icon.png"  style="height:28px;width:16px;"></image>
            <text slot="middle" style="font-family: PingFangSC-Medium;font-size: 34px;color: #fff;">我的银行卡</text> -->
            <image slot="right" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/addbank.png"  style="height:54px;width:54px;"  @click="goaddbankcard()" ></image>
        </wxc-minibar>
        <scroller style="position:fixed;top:90px;bottom:0;left:0;right:0;background-color:#F5F5F5;">
            <div class="banklist" id="bankListCont">
                <div class="banklist_item" v-if="!!arr && arr.length > 0" v-for="(item,index) in arr"  :key="index" @touchstart="ontouchstart($event,item)" @touchmove="ontouchmove($event,item)" @touchend="ontouchend($event,item, index)" >
                        <div class="banklist_item_fl">
                                <image style="width:686px;height:232px;" :src="item | fliterSrc"></image>
                        </div>
                        <div class="banklist_item_md">
                                <!-- <div style="margin-top:40px;">
                                    <text style="font-size: 36px;color: #FFFFFF;">{{item.bankName}}</text>
                                </div> -->
                                <!-- <div>
                                    <text style="font-size: 24px;color: #FFFFFF;">{{item.name}}</text>
                                </div> -->
                                <div class="account_number" v-if=" !!item.bankCard && item.bankCard.length > 0">
                                    <text class="account_txt">****</text>
                                    <text class="account_txt">****</text>
                                    <text class="account_txt">****</text>
                                    <text class="account_txt mg-top">{{ item.bankCard | substrString }}</text>
                                </div>
                        </div>
                        <!-- <div class="banklist_item_fr">
                            <text style="font-size: 24px;color: #FFFFFF;">{{item.name}}</text>
                        </div> -->
                        <div class="delete" v-if="item.flag" @click="deleteFn(item.bankCard, index)">
                            <text style="font-size:24px;color:#FFFFFF;">删除</text>
                        </div>
                </div>

                <div class="norecord" v-if="!arr || arr.length == 0">
                    <image style="width:298.5px;height:298.5px;" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/norechargerecord.png"></image>
                    <text style="font-size: 40px;color: #9E8383;margin-top:75.7px;">未绑定银行卡</text>
                </div>
            </div>
        </scroller>
   </div>
</template>

<script>
const modal = weex.requireModule("modal");
const navigator = weex.requireModule("navigator");
const animation = weex.requireModule('animation')
import { WxcMask, WxcPopup } from "weex-ui";
import WxcMinibar from "@/components/modules/wxc-minibar/index.js"
import { getBaseUrl, serialize } from "@/utils/index.js";
import { postResponsesToken } from "@/api.js";
import banklistdata from "@/js/banklist.js";

let bankListApp = new BroadcastChannel('app')

export default {
    data() {
        return {
            baseURL:'',
            distance:'',
            arr:[]
        }
    },
    components: {
        WxcMinibar  
    },

    filters:{
        substrString(value) {
            return value.substr(value.length-4)
        },

        fliterSrc(item) {
			let src = ''
			banklistdata.banklist.forEach((value, index)=>{
				if( value.title === item.bankName) {
					src = value.bgsrc
					return false;
				}
			})

			return src
		}
    },

    created() {
        this.baseURL = getBaseUrl(weex.config.bundleUrl, true)

        this.queryBankCard()

        bankListApp.onmessage =  (event)=> {
            // 获取银行卡列表
            this.queryBankCard()
        }
    },
    methods: {
        goaddbankcard(){
            navigator.push({
                'url': this.baseURL + 'views/mywallet/addbankcard.js',
                'animated': 'true'
            })
        },
        ontouchstart(e,item) {
            item.startX= e.changedTouches[0].pageX
        },
        ontouchmove(e,item) {
            item.endX = e.changedTouches[0].pageX
            
        },
        ontouchend(e, item, index) {
            item.distance = item.endX - item.startX

            this.$set(item, 'flag', item.distance < 0)
        },

        move (target, x, index) {
            animation.transition(childNodes[childNodes.length-1], {
            styles: {
                transform: 'translate(' + x +'px, 0)',
            },
            duration: 800, //ms
            timingFunction: 'ease',
            delay: 0 //ms
            })
        },

        discerncolor(item){
            console.log(item);
            let param = {
                "red"   : 'linear-gradient(to right, #DE3D46, #E9507B)',
                "green" : 'linear-gradient(to right, #37C39C, #37BCC1)',
                "yellow": 'linear-gradient(to right, #F9D13F, #F5894C)',
                "blue"  : 'linear-gradient(to right, #5BA1D7, #4168BF)',
            }

            return {
                backgroundImage: param[item.bankColor]
            }
            
        },

        deleteFn(bankCard, index) {
            modal.confirm({
                message: '确定删除该银行卡吗？',
                duration: 0.3,
                okTitle:'确定',
                cancelTitle:'取消'
            },(value)=>{
                value === '确定' && this.deleteBankCard(bankCard, index)
            })
        },

        async deleteBankCard(bankCard, index) {
            let data = await postResponsesToken('account/bank/deleteBankCard', {'bankCard': bankCard})
            if(data.code === 0) {
                this.arr.splice(index, 1)
            } else {
                modal.toast({ message: data.msg })
            }
        },

        async queryBankCard() {
            let data = await postResponsesToken('account/bank/queryBankCard')
            
            if(data.code === 0) {
                this.arr = data.data
            } else {
                modal.toast({ message: data.msg })
            }
        }
    
    }
};
</script>

<style scoped>
    .account_txt{
        font-family: PingFangSC-Medium;
        font-size: 52px;
        color: #FFFFFF;
        margin-left:30px;
        height:52px;
        line-height: 52px;
    }
   .banklist_item{
       width: 686px;
       height: 232px;
       margin-left: 32px;
       margin-right: 32px;
       margin-top: 16px;
       margin-bottom: 16px;
       position: relative;
   }
    .mg-top{
        margin-top:-10px;
    }
   .account_number{
       display: flex;
       flex-direction: row;
       align-items: center;
       margin-top: 140px;
       margin-left:10px;

   }
   .banklist_item_fl{
     position: absolute;
    left:0;
    top:0;
    width:686px;
    height:232px;
       
   }
   .banklist_item_md{
       flex: 4;
   }
   .banklist_item_fr{
       flex: 1;
       padding-top: 61px;
   }
   .delete{
     
       align-items: center;
       justify-content: center; 
       background-color:red;
       position: absolute;
       right:0;
       top:0;
       width:100px;
        height:232px;

   }

    .norecord{
        display: flex;
        justify-content: center;
        margin-top: 164.8px;
        align-items: center;
    }
</style>
